<!-- 场地选择 -->
<template>
	<view>
		<view class="container" v-if="showFlag1">
			<scroll-view class="scrollheight" scroll-y="true" :style="{height:setcollapseheight() - 70 + 'px'}">
				<view class="item" v-for="(item,index) in arableList" :key="index">
					<view class="top" @click="goOrder(item)">
						<view class="img">
							<image :src="item.groundPicture" mode=""></image>
						</view>
						<view class="describle">
							<view class="name">
								{{item.groundName}}
							</view>
							<view class="day">
								起租天数：{{item.leaseDayNum}}天
							</view>
						</view>
					</view>
					<view class="bottom" @click="goInfo(item)">
						<view class="info">
							<image src="@/static/xq.png" style="width:15px;height: 15px; padding-right: 5px;"></image>
							<p>场地详情</p>
						</view>
						<u-icon name="arrow-right" color="#0480FB" size="28"></u-icon>
					</view>
				</view>
			</scroll-view>
		</view>
		<u-popup :show="showPop" :round="10" mode="bottom" width="100%" height="100%" :closeable="false"
			@close="showPop=false">
			<view class="popUpOperate">
				<view class="center">
					场地详情
				</view>
			</view>
			<scroll-view scroll-y="true" :style="{height:setcollapseheight() - 130 + 'px'}" style="margin-top: 10rpx;">
				<view class="popTop" @click="popConfirm()">
					<view class="first">
						<view class="popItemTop">
							<image src="@/static/machinery/xuangeng.png" mode=""></image>
						</view>
					</view>
					<!-- <view class="first" v-else>
						<view class="popItemTop">
							<template v-if="nowEquipmentName.includes('旋')">
								<image src="" mode=""></image>
							</template>
							<template v-else-if="nowEquipmentName.includes('拖拉')">
								<image src="@/static/machinery/tuola.png" mode=""></image>
							</template>
							<template v-else-if="nowEquipmentName.includes('打捆')">
								<image src="@/static/machinery/dakun.png" mode=""></image>
							</template>
							<template v-else-if="nowEquipmentName.includes('插秧')">
								<image src="@/static/machinery/chayang.png" mode=""></image>
							</template>
							<template v-else-if="nowEquipmentName.includes('洒肥')">
								<image src="@/static/machinery/safei.png" mode=""></image>
							</template>
							<template v-else>
								<image src="@/static/machinery/shouge.png" mode=""></image>
							</template>
						</view>
					</view> -->
					<view class="tip">
						*图片仅供参考，以实际农机为准
					</view>
					<view class="title">
						{{arableInfo.groundName}}
					</view>
				</view>
				<view class="gray"></view>
				<view class="popBottom">
					<view class="title">
						场地信息
					</view>
					<view class="info">
						场地面积：{{arableInfo.groundArea}}
					</view>
					<view class="info">
						场地位置：{{AllName}}{{arableInfo.stationInfo}}
					</view>
					<view class="info">
						出租人：{{arableInfo.serviceName}}
					</view>
					<view class="info">
						联系电话：{{arableInfo.servicePhone}}
					</view>
					<view class="info">
						场地价格：{{arableInfo.unitPrice}}
					</view>
					<view class="info">
						起租天数：{{arableInfo.leaseDayNum}}天起租
					</view>
				</view>
			</scroll-view>
		</u-popup>
	</view>
</template>

<script>
	import {
		addressList
	} from '@/subPage1/plugins/address.js'
	import API from '@/api/socialized-servce/farm-service/user/selectAnchor/index.js'
	export default {
		data() {
			return {
				svcClassId: '',
				serviceProjectNo: '',
				originalArableList: [],
				arableList: [],
				showPop: false,
				arableInfo: {},
				addressList: addressList,
				AllName: '',
			}
		},
		props: {
			showFlag1: {
				type: Boolean,
				default: () => false
			},
			serviceBeginTime: {
				type: String,
				default: () => ''
			},
			serviceEndTime: {
				type: String,
				default: () => ''
			}
		},
		created() {
			if(this.showFlag1) {
				this.svcClassId = uni.getStorageSync('svcClassId')
				this.serviceProjectNo = uni.getStorageSync('serviceProjectNo')
				this.getArableList()
			}
		},
		methods: {
			// 场地
			async getArableList() {
				if (this.loading) return
				this.loading = true
				let {
					serviceBeginTime,
					serviceEndTime,
					svcClassId,
					serviceProjectNo
				} = this
				let params = {
					serviceBeginTime,
					serviceEndTime,
					// svcClassId,
					serviceProjectNo,
					richEntity: true
				}
				let res = await API.queryArable(params)
				if (res.code === 200) {
					this.arableList = []
					this.originalArableList = res.data
					this.originalArableList.forEach(el => {
						let params = {}
						el.serviceProperties.forEach(item => {
							if(item.expression === 'groundName') {
								params['groundName'] = item.textValue
								params['svcObjId'] = item.svcObjId
							}
							if(item.expression === 'groundArea') {
								params['groundArea'] = item.numValue
							}
							if(item.expression === 'station') {//省市区
								params['station'] = item.textValue
							}
							if(item.expression === 'unitPrice') {
								params['unitPrice'] = item.numValue
							}
							if(item.expression === 'leaseDayNum') {
								params['leaseDayNum'] = (item.numValue*1).toFixed(0)
							}
							if(item.expression === 'groundName') {
								params['groundName'] = item.textValue
							}
							if(item.expression === 'serviceName') {
								params['serviceName'] = item.textValue
							}
							if(item.expression === 'servicePhone') {
								params['servicePhone'] = item.textValue
							}
							if(item.expression === 'groundPicture') {
								params['groundPicture'] = item.textValue
							}
							if(item.expression === 'groundUse') {
								params['relateDevice'] = item.textValue
							}
							if(item.expression === 'stationInfo') {
								params['stationInfo'] = item.textValue
							}
						})
						this.arableList.push(params)
					})
					this.loading = false
				} else {
					this.loading = true
				}
			},
			goInfo(item) {
				this.arableInfo = {
					...item
				}
				let arr = item.station.split(',')
				let pName = addressList.filter(el => el.provinceId === arr[0]*1)[0].name
				let cName = addressList.filter(el => el.provinceId === arr[0]*1)[0].city.filter(el1 => el1.cityId === arr[1]*1)[0].name
				let aName = addressList.filter(el => el.provinceId === arr[0]*1)[0].city.filter(el1 => el1.cityId === arr[1]*1)[0].area.filter(el2 => el2.areaId === arr[2]*1)[0].name
				this.AllName = `${pName}${cName}${aName}`
				this.showPop = true
			},
			goOrder(item) {
				let num = new Date(uni.getStorageSync('datetimerange')[1]) - new Date(uni.getStorageSync('datetimerange')[0])
				let day = (num/24/60/60/1000)
				let expectPrice = (day*item.unitPrice).toFixed(2)
				uni.reLaunch({
					url: `/subPage1/socialized-service/farm-service/order/order?svcObjId=${item.svcObjId}&id=${item.groundName}&name=${item.groundName}&expectPrice=${expectPrice}&day=${day}`
				})
			},
			setcollapseheight() {
				let topheightone = uni.upx2px(136)
				let newheight = topheightone
				let winHeight = 0
				uni.getSystemInfo({
					success: function(res) {
						winHeight = res.windowHeight
					}
				});
				winHeight = parseInt(winHeight) - newheight
				// #ifndef H5
				winHeight = winHeight

				// #endif
				return winHeight
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		box-sizing: border-box;
		width: 100%;
		padding: 0 20rpx;
		
		.item {
			border: 2rpx solid #ccc;
			padding: 20rpx;
			margin-bottom: 40rpx;	
	

			.top {
				display: flex;
				border-bottom: 2rpx solid #ccc;
				align-items: center;

				.img {
					height: 100rpx;

					image {
						height: 100rpx;
						width: 100rpx;
					}
				}
				
				.describle {
					padding-left: 20rpx;
					.name{
						font-size: 14px;
						color: #0480FB;
						margin-bottom: 10px;
					}
					.day{
						margin-bottom: 5px;
					}
				}
			}

			.bottom {
				padding-top: 20rpx;
				display: flex;
				justify-content: space-between;

				.info {
					display: flex;
					justify-content: space-between;
					 align-items: center; 
				}

				.day {
					color: #e0001b;
				}
			}
		}
	}
	
	// pop
		.popUpOperate {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100rpx;
			padding: 0 20rpx;
			border-bottom: 1px solid #ccc;
	
			.center {
				font-weight: 700;
			}
		}
	
		.popTop {
			padding: 0 20rpx;
			margin-bottom: 30rpx;
			.first {
				display: flex;
				flex-wrap: wrap;
	
				.popItemTop {
					width: 32%;
					height: 150rpx;
					margin-right: calc(4% / 2);
					margin-bottom: 20rpx;
	
					&:nth-child(3n) {
						margin-right: 0;
					}
	
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
	
			.tip {
				color: #d9001b;
				margin-bottom: 20rpx;
			}
	
			.title {
				font-size: 32rpx;
				font-weight: 700;
				margin-bottom: 20rpx;
			}
		}
		
		.gray {
			height: 20rpx;
			width: 100%;
			background-color: #ccc;
		}
		.popBottom {
			padding: 20rpx;
			.title {
				font-weight: 700;
				font-size: 32rpx;
			}
			.info {
				margin: 10rpx;
			}
		}
</style>